<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="标签名称:" prop="tagName">
            {{ formData.tagName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级标签:" prop="parentId" v-if="formData.parentId">
            {{ formData.parentName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否公开:" prop="publicStatus">
            <dict-tag :type="DICT_TYPE.YES_OR_NO" :value="formData.publicStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联资源:" prop="sourceRespVOList.length">
            {{ formData.sourceRespVOList?.length || 0 }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标签描述:" prop="tagDesc">
            {{ formData.tagDesc }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">数字资源</el-divider>
      <el-table :data="formData.sourceRespVOList" :stripe="true" :show-overflow-tooltip="true">
        <!-- <el-table-column label="主键" align="center" prop="id" /> -->
        <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
        <el-table-column label="封面" align="center" prop="mainImage">
          <template #default="scope">
            <el-image
              style="width: 44px; height: 44px;"
              :src="scope.row.mainImage"
              :preview-src-list="[scope.row.mainImage]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="资源名称" align="center" prop="sourceName" />
        <el-table-column label="资源编号" align="center" prop="sourceCode" />
        <el-table-column label="资源类型" align="center" prop="sourceType">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="scope.row.sourceType" />
          </template>
        </el-table-column>
        <el-table-column label="来源信息" align="center" prop="sourceDesc">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_DESC" :value="scope.row.sourceDesc" />
          </template>
        </el-table-column>
        <el-table-column label="资源来源" align="center" prop="sourceFrom">
          <template #default="scope">
            <!-- <dict-tag :type="DICT_TYPE.SOURCE_FROM" :value="scope.row.sourceFrom" /> -->
            {{ scope.row.sourceFrom }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="60px" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openDetail(scope.row)"
              v-hasPermi="['dr:source:query']"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>

    <!-- 资源详情 -->
    <SourceDetail v-model:visible="detailVisible" :data="currentRow" />
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { SourceVO } from '@/api/dr/source'
import { SourceTagApi, SourceTagVO } from '@/api/dr/sourcetag'

defineOptions({ name: 'SourceTagDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref('标签查看')
const formLoading = ref(false)
const detailVisible = ref<boolean>(false)
const currentRow = ref<SourceVO>()

const	formData = ref<SourceTagVO | any>({})

const getDetail = () => {
  formLoading.value = true
  SourceTagApi.getSourceTag(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
    if(props.data.parentId) {
      SourceTagApi.getSourceTag(props.data.parentId).then((data) => {
        console.log('getDetail', data)
        formData.value.parentName = data.tagName
      })
    }
  }).finally(() => {
    formLoading.value = false
  })
}
// 详情弹窗
const openDetail = (row: any) => {
  currentRow.value = { ...row }
  detailVisible.value = true
}
const open = () => {
  getDetail()
}
</script>

<style lang="scss" scoped>
</style>
